<form id='smsSettingForm'>
    <div class="form-body">
        <div class="content">
            <div class="row-fluid">
                <label class="span4 side-right" for='txtValidity' data-trans='sms_validity'></label>
                <div class="span8">
                    <select data-transid='sms_validity' style="width:163px;" id="txtValidity" class="form-control" data-bind="options: modes, value: selectedMode, optionsText: transOption('sms_validity'), optionsValue: 'value'"></select>
                </div>
            </div>
            <div class="row-fluid">
                <span class="span4 side-right" style="padding-right:0px;">
                    <label for='txtCenterNumber' data-trans='center_number'></label>
                    <label style="color: red;"></label>
                </span>
                <div class="span8">
                    <input id='txtCenterNumber' name="txtCenterNumber" type="text" data-bind="value: centerNumber" class="required form-control" maxlength='40' />
                </div>
            </div>
            <div class="row-fluid">
                <label class="span4 side-right" data-trans='delivery_report'></label>
                <div class="span8">
                    <span id="switch" style="cursor: pointer" data-bind="click:function(){wifiExtenderSwitchChange();},attr:{'class':(deliveryReport()=='1'?'bg-switch-enable':'bg-switch-disable')}"></span>
                    <span id="switch_text" class="switch_note" data-bind="attr:{'data-trans': deliveryReport()=='1'?'enable':'disable'}"></span>
                </div>
            </div>
        </div>
        <div class="form-buttons">
            <input type="submit" class="btn-1" data-trans='apply' />
        </div>
        <div class="form-note">
            <div class="notes-title">&nbsp;</div>
            <ul class="notes-content">
                <li data-trans="sms_setting_note_validity"></li>
                <li data-trans="sms_setting_note_center_number"></li>
                <li data-trans="sms_setting_note_delivery_report"></li>
            </ul>
        </div>
    </div>
</form>

<script>
    $(function() {
        var service = window._service;
        var config = service.config;

        var validityModes = _.map(config.SMS_VALIDITY, function(item) {
            return new Option(item.name, item.value);
        });

        function SmsSettingVM() {
            var self = this;
            var setting = getSmsSetting();
            self.modes = ko.observableArray(validityModes);
            self.selectedMode = ko.observable(setting.validity);
            self.centerNumber = ko.observable(setting.centerNumber);
            self.deliveryReport = ko.observable(setting.deliveryReport);

            self.clear = function() {
                init();
                clearValidateMsg();
            };
            /**
             * 保存设置
             * @method save
             */
            self.save = function() {
                showLoading('waiting');
                var params = {};
                params.validity = self.selectedMode();
                params.centerNumber = self.centerNumber();
                params.deliveryReport = self.deliveryReport();
                service.setSmsSetting(params, function(result) {
                    if (result.result == "success") {
                        successOverlay();
                    } else {
                        errorOverlay();
                    }
                });
            };

            self.wifiExtenderSwitchChange = function() {
                if (self.deliveryReport() == '1') {
                    self.deliveryReport('0');
                    $('#switch').removeClass().addClass('bg-switch-disable');
                    $('#switch_text').html($.i18n.prop('disable'));
                } else {
                    self.deliveryReport('1');
                    $('#switch').removeClass().addClass('bg-switch-enable');
                    $('#switch_text').html($.i18n.prop('enable'));

                }
            };
        }

        /**
         * 获取短信设置参数
         * @method getSmsSetting
         * @return {Object}
         */
        function getSmsSetting() {
            return service.getSmsSetting();
        }
        /**
         * 页面初始化
         * @method init
         */
        function init() {
            var container = $('#containerSettings');
            ko.cleanNode(container[0]);
            var vm = new SmsSettingVM();
            ko.applyBindings(vm, container[0]);
            $('#smsSettingForm').validate({
                submitHandler: function() {
                    vm.save();
                },
                rules: {
                    txtCenterNumber: "sms_service_center_check"
                }
            });
        }

        init();
        $('#containerSettings').translate();
    });
</script>